*{
  margin: 0;
  padding: 0;
}


// sass 公共样式 继承

// 设一个自定义类名作为公共样式
// 例如 .goods{
//   color: #333;
//   background: #e7dfdf27;
//   width: 300px;
// }

// 引入 .goods-list{
//   @extend .goods
// }

// 为了防止自定义类名与html中所起类名重复和冲突，可将上述类名加一个占位符。
// 例如 %goods{
//   color: #333;
//   background: #e7dfdf27;
//   width: 300px;
// }
// 引入 .goods-list{
//   @extend %goods
// }


// sass 公共样式 混合(Mixin)
// @mixin goods {
//   color: #dd3434;
//   background: #fff;
//   margin: 0 auto;
// }

// .goods-list{
//   @include goods;
// }

// 也可以在自定义类名后面加小括号设置自定义属性名
// 例如 
// @mixin goods($color, $background, $width) {
//   color:$color;
//   background: $background;
//   width: $width;

// }

// .goods-list{
//   @include goods(#333,#dd3434,200px);
//   font-size:15px;
//   box-sizing: border-box;
//   border-radius: 20px;
// }

// 插入文件

// 可插入css文件和scss文件
// @import "./sass重用.css"

@mixin goods($font-size,$color,$background){
  width: 300px;
  text-align: center;
  box-sizing: border-box;
  font-size: $font-size;
  color: $color;
  background: $background;
}

.goods-list{
  display: flex;
  justify-content: space-around;
  .goods-item{
    width: 300px;
    display: flex;
    background: #fff;
    .goods-img{
      img{
        width: 100px;
        height: 100px;
      }
    }
    .item-title{
      @include goods(16px,#333,#fff){
        height: 46px;
        line-height: 23px;
      }
    }
  }
}